<template>
  <div class="cell">
    <div class="div-flex">
      <div style="flex:1;">
        <div class="cell-title">{{title}}</div>
        <div class="cell-detail">{{detail}}</div>
      </div>
      <div style="flex-shrink:0;">
        <slot name="value"></slot>
        <div class="cell-time">{{time}}</div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'details-cell', //标题  详情  时间 常用布局
    components: {},
    computed: {},
    data() {
      return {}
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      detail: {
        type: String,
        default: ''
      },
      time: {
        type: String,
        default: ''
      }
    },
    mounted() {},
    methods: {}
  }

</script>
<style lang="scss" scoped>
  .cell {
    padding: 10px 15px;
    position: relative;
    background-color: white;
  }

  .cell:before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e5e5e5;
    color: #e5e5e5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 15px;
    z-index: 2;
  }

  .cell:first-child:before {
    display: none;
  }

  .div-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }

  .cell-title {
    color: #333333;
    font-size: 13px;
  }

  .cell-detail {
    color: #999999;
    font-size: 12px;
    margin-top: 8px;
  }

  .cell-time {
    color: #333333;
    font-size: 13px;
  }

</style>
